<template>
  <div class="info-group">
    <div class="group-title">
      五元组信息
    </div>
    <div class="group-data-table">
      <el-row class="nl-row">
        <el-col :span="6" class="col-label">客户端IP(clientIp)</el-col>
        <el-col :span="18" class="col-content">{{ field.clientIp }}</el-col>
      </el-row>

      <el-row class="nl-row">
        <el-col :span="6" class="col-label">客户端IP(ipv6)(clientIpV6)</el-col>
        <el-col :span="18" class="col-content">{{ field.clientIpV6 }}</el-col>
      </el-row>

      <el-row class="nl-row">
        <el-col :span="6" class="col-label">客户端端口(clientPort)</el-col>
        <el-col :span="18" class="col-content">{{ field.clientPort }}</el-col>
      </el-row>

      <el-row class="nl-row">
        <el-col :span="6" class="col-label">服务端IP(serverIp)</el-col>
        <el-col :span="18" class="col-content">{{ field.serverIp }}</el-col>
      </el-row>

      <el-row class="nl-row">
        <el-col :span="6" class="col-label">服务端IP(ipv6)(serverIpV6)</el-col>
        <el-col :span="18" class="col-content">{{ field.serverIpV6 }}</el-col>
      </el-row>

      <el-row class="nl-row">
        <el-col :span="6" class="col-label">服务端端口(serverPort)</el-col>
        <el-col :span="18" class="col-content">{{ field.serverPort }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'meta-data',
  props: ['field'],
};
</script>

<style scoped>
@import '../basicInfo.css';
</style>

<style scoped>
.group-data-table {
  width: 100%;
  border-top: solid 1px #9bc5eb;
  border-left: solid 1px #9bc5eb;
  border-right: solid 1px #9bc5eb;
}

.nl-row {
  height: 30px;
  line-height: 29px;
  border-bottom: solid 1px #9bc5eb;
}

.col-label {
  height: 100%;
  color: #333;
  font-weight: bold;

  background: #cde2f5;

  border-right: solid 1px #9bc5eb;
  padding-left: 10px;
}

.col-content {
  height: 100%;
  background: #fff;
  padding-left: 10px;
}
</style>
